{% extends "trees/base.html" %}
{% block title %}Add Nursery - JM3{% endblock %}
{% block extra_head %}
<style>.wizard-step[hidden]{display:none;}</style>
<script>
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(() => {}, () => {}, {enableHighAccuracy: true, timeout: 3000});
  }
</script>
{% endblock %}
{% block content %}
<div class="col-12 col-md-6 mx-auto">
  <p class="mb-1 mt-2"><a href="{% url 'dashboard' %}" class="text-muted text-decoration-none">&larr; Cancel</a></p>
  <h3 class="mb-2">🌱 Add Nursery</h3>
  <div class="progress mb-4" style="height:6px;"><div class="progress-bar bg-jm3" id="wprog" style="width:25%"></div></div>

  <form method="post" id="nurseryForm">
    {% csrf_token %}

    <!-- STEP 1: Location -->
    <div class="wizard-step">
      <h5 class="fw-bold">Where is the nursery?</h5>
      <div class="my-3 p-3 rounded" id="locBox" style="background:#fff8e1;">
        <span id="locMsg">📍 Enable location access for JM3 to work.</span>
        {{ form.latitude }}{{ form.longitude }}
      </div>
      <button type="button" class="btn btn-jm3 btn-lg w-100 nextBtn" disabled>Continue</button>
    </div>

    <!-- STEP 2: Photo -->
    <div class="wizard-step" hidden>
      <h5 class="fw-bold">Take a photo</h5>
      <p class="text-muted small">A photo of the nursery for identification.</p>
      {% include "trees/_camera.html" with autostart='false' %}
      <div class="d-flex gap-2 mt-2">
        <button type="button" class="btn btn-light backBtn">Back</button>
        <button type="button" class="btn btn-jm3 flex-grow-1 nextBtn" disabled>Continue</button>
      </div>
    </div>

    <!-- STEP 3: Nursery Details -->
    <div class="wizard-step" hidden>
      <h5 class="fw-bold">Nursery details</h5>
      <div class="mb-3"><label class="form-label">{{ form.name.label }}</label>{{ form.name }}</div>
      <div class="mb-3"><label class="form-label">{{ form.seedling_capacity.label }}</label>{{ form.seedling_capacity }}</div>
      <div class="mb-3"><label class="form-label">Species available</label>{{ form.species_available }}</div>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-light backBtn">Back</button>
        <button type="submit" class="btn btn-jm3 flex-grow-1">Save Nursery</button>
      </div>
    </div>

    {{ form.non_field_errors }}
  </form>
</div>
{% endblock %}
{% block extra_js %}
<script>
  const steps = [...document.querySelectorAll('.wizard-step')];
  const prog = document.getElementById('wprog');
  let idx = 0, photoReady = false, gpsReady = false, fallMap = null;
  const lat = document.getElementById('id_latitude');
  const lng = document.getElementById('id_longitude');
  const name = document.getElementById('id_name');

  function gate() {
    const btn = steps[idx].querySelector('.nextBtn');
    if (!btn) return;
    if (idx === 0) btn.disabled = !gpsReady;
    else if (idx === 1) btn.disabled = !photoReady;
    else btn.disabled = false;
  }
  function show(i) {
    steps.forEach((s, j) => s.hidden = j !== i);
    idx = i; prog.style.width = ((i + 1) / steps.length * 100) + '%';
    if (i === 1 && !cameraStarted) {
      cameraStarted = true;
      document.querySelector('[data-camera]').dispatchEvent(new CustomEvent('jm3:start'));
    }
    gate();
  }
  document.querySelectorAll('.nextBtn').forEach(b => b.addEventListener('click', () => show(idx + 1)));
  document.querySelectorAll('.backBtn').forEach(b => b.addEventListener('click', () => show(idx - 1)));

  let cameraStarted = false;
  document.addEventListener('jm3:capture', () => { photoReady = true; gate(); });
  document.addEventListener('jm3:retake', () => { photoReady = false; gate(); });

  const locMsg = document.getElementById('locMsg'), locBox = document.getElementById('locBox');
  function setGps(la, lo) {
    lat.value = la.toFixed(6); lng.value = lo.toFixed(6);
    gpsReady = true; locBox.style.background = '#e8f5e9';
    locMsg.textContent = '📍 Location captured ✓'; gate();
  }
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      p => setGps(p.coords.latitude, p.coords.longitude),
      () => { locMsg.textContent = '📍 Enable location access for JM3 to work.'; });
  } else { locMsg.textContent = '📍 Location access not available on this device.'; }

  document.querySelector('[data-camera]').dataset.required = 'false';
  show(0);
</script>
{% endblock %}